<template>
    <div class="content">
        <el-table :data="tableDate" border style="width: 100%">
            <el-table-column fixed type="index" width="50"></el-table-column>
            <el-table-column
                prop="username"
                label="用户名"
                width="210"
            ></el-table-column>
            <el-table-column prop="mobile" label="电话" width="210"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="210" ></el-table-column>
            <el-table-column prop="role_name" label="角色" width="210"></el-table-column>
            <el-table-column prop="mg_state" label="状态" width="210">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)" :state="scope.row.mg_state"></el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" >
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="dialogFormVisible = true;handleChange(scope.$index, scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button type="warning" size="small">分配角色</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.currentPage"
            :page-sizes="[2, 10, 50, 100]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <!-- 对话框弹层 -->
        <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible" width="450px">
            <el-form :model="form" ref="form" :label-position="labelPosition" style="margin:20px auto;"  >
                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="form.mobile" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false;YesAdd()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:"TableCom",
    props:["list","addFlag"],
    data() {
        return {
            labelPosition: 'right',
            formLabelWidth: '80px',
		    dialogFormVisible: false,
            dialogFormVisible1: false,
            value: "100",
            currentPage: 1,
            total:0,
            tableDate:[],
            params:{
                pagenum:1,
                pagesize:2,
                query:''
            },
            id:null,
            form: {
                id:"",
                username: "",
                email: "",
                mobile: ""
            }, 
            nowState: ""
        };
    },
	watch:{
		addFlag:{
			handler(val){
				console.log(val)
				if(val){
					this.getTableData();
				}
			}
		}
	},
    methods: {
        init(){
			// 数据初始化
			this.getTableData();
		},
        handleClick(row) {
            console.log(row);
        },
        handleSizeChange(val) {
            this.params.pagesize = val;
            // console.log(`每页 ${val} 条`);
            this.getTableData();
        },
        handleCurrentChange(val) {
            this.params.pagenum = val;
            // console.log(`当前页: ${val}`);
            this.getTableData();
        },
        // 删除逻辑
        async handleDelete(index, row){
            // console.log(row)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                // 获取当前要删除信息的id
                let id = row.id
                // console.log(typeof id)
                let res = await this.$http.deleteUser(id);
                console.log(res);
                // this.$emit('getTableData');
                this.$router.go(0)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 获取列表信息
        async getTableData(){
			//发送Ajax请求
            let res = await this.$http.getsyan(this.params);
            // console.log(res)
            this.total = res.data.data.total; 
            this.tableDate = res.data.data.users;
            // console.log(this.tableDate)
		},
        // 修改用户信息
        async handleChange(index,row){
            // 获取当前要修改信息的id
            this.id = row
            console.log(this.id)
            let res = this.tableDate.find((item) => {
                if( item.id == this.id){
                    return item.id
                }
            })
            console.log(res)
            this.form.email = res.email;
            this.form.mobile = res.mobile;
            // 
            // console.log(res.username)
            console.log(res)
            this.form.username = res.username;
           
        },
        // 修改内容
        async YesAdd(){
            // console.log(this.form)
            let bainji = await this.$http.ChangeUser({
                id:this.id,
                email:this.form.email,
                mobile:this.form.mobile
            });
            this.getTableData();
        },
        //修改用户状态
        // switch状态改变
        async userStateChange(userInfo) {
            console.log(userInfo)
            let state = await this.$http.changUserStateRequest(userInfo.id,userInfo.mg_state);
            let result = state.data;
            console.log('修改状态', result);
            if (result.meta.status !== 200) {
                // 如果更新状态失败，要让已经改变的状态恢复成原样
                this.nowState = !this.nowState;
                this.$message({
                    message: '更新状态失败',
                    type: 'error'
                });
                // this.$message('更新状态失败',"error");
            }
            // this.$message('更新状态成功', 'success');
            this.$message({
                message: '更新状态成功',
                type: 'success'
            });
        }
    },
    created(){
        this.$nextTick(() => {
			this.init();
		})
    },
	mounted(){
        // 查询
		this.bus.$on("search",async (val) => {
            if(val == ""){
                return
            }else{
                // 根据输入框的内容从数据里查找并返回对应的id
                console.log(val.username);
                console.log (this.params); 
                let res = this.tableDate.find((item) => {
                    if( item.username == val.username){
                        return item.id
                    }
                })
                this.query = res.id;
                let a = await this.$http.SearchUser(this.query);
                // this.getTableData(this.params);
                // console.log(a.data.data)
                this.tableDate = [];
                this.tableDate.push(a.data.data)
            }
		})
	}    
}
</script>

<style lang="scss" scoped>
.content{
    width: calc(100vw - 260px);
    padding: 20px 20px;
    box-sizing: border-box;
    margin-top: 20px;
    // background: #eeeded;
    .el-form-item{
        display: flex;
        line-height: 40px;
        margin-bottom: 10px !important;
        font-size: 20px;
        label{
            font-size: 16px;
        }
        p{
            font-size: 16px;
        }
    }
    .btn{
        margin-top: 20px;
        padding: 0 0 !important;
        margin-left: 0 !important;
    }
    .el-table-column{
        display: flex;
        overflow: hidden;
    }
}
.block{
    margin-top: 30px;
}
::deep .el-form-item{
    justify-content: flex-start;
}
// ::deep .el-table--scrollable-x,.el-table__body-wrapper{
//     overflow-x: hidden;
// }
</style>